You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.8 KiB
45 lines
1.8 KiB
2 months ago
|
import React from "react";
|
||
|
|
import { getProductById } from "../../../../lib/data";
|
||
|
|
|
||
|
|
export const revalidate = 300;
|
||
|
|
|
||
|
|
export default function ProductPage({ params }: { params: { locale: string; id: string } }) {
|
||
|
|
const { locale, id } = params;
|
||
|
|
const t = {
|
||
|
|
notFound: locale === "en" ? "Product Not Found" : "产品未找到",
|
||
|
|
back: locale === "en" ? "Back" : "返回首页",
|
||
|
|
home: locale === "en" ? "Home" : "首页",
|
||
|
|
addToCart: locale === "en" ? "Add to cart" : "加入购物车",
|
||
|
|
} as const;
|
||
|
|
const data = getProductById(id, locale);
|
||
|
|
if (!data) {
|
||
|
|
return (
|
||
|
|
<div className="mx-auto max-w-screen-md px-4 py-12">
|
||
|
|
<h1 className="text-2xl font-semibold">{t.notFound}</h1>
|
||
|
|
<a className="mt-6 inline-block text-blue-600" href={`/${locale}`}>{t.back}</a>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
const { product, floor } = data;
|
||
|
|
return (
|
||
|
|
<div className="mx-auto max-w-screen-md px-4 py-8">
|
||
|
|
<div className="text-sm text-gray-600 mb-4">
|
||
|
|
<a href={`/${locale}`}>{t.home}</a> / <a href={`/${locale}/channel/${floor.id.replace(/^floor-/, '')}`}>{floor.title}</a> / <span>{product.name}</span>
|
||
|
|
</div>
|
||
|
|
<div className="grid md:grid-cols-2 gap-6">
|
||
|
|
<img src={product.image} alt={product.name} className="w-full object-cover rounded-lg aspect-square bg-white" />
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h1 className="text-2xl font-semibold">{product.name}</h1>
|
||
|
|
{product.description && <p className="text-gray-600">{product.description}</p>}
|
||
|
|
{product.price != null && <div className="text-rose-600 text-xl font-semibold">¥{product.price}</div>}
|
||
|
|
<div className="pt-4">
|
||
|
|
<button className="px-5 py-2.5 rounded bg-black text-white">{t.addToCart}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|